import { Card, message, Row, Col, Space, Divider } from 'antd';
import { history, useRequest } from 'umi';
import ProForm, { ProFormUploadButton, ProFormSelect, ProFormText } from '@ant-design/pro-form';
import type { FC } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { fakeSubmitForm, querySubscriberDetail, updateSubscriber } from './servic';
import { queryDictList } from '@/services/ant-design-pro/api';

const BasicForm: FC<Record<string, any>> = () => {
  const { run } = useRequest(fakeSubmitForm, {
    manual: true,
    onSuccess: () => {
      message.success('提交成功');
    },
    onError: (error) => {
      console.log('eroor', error);
      message.error('提交失败');
    },
  });

  // const { data, loading } = useRequest(() => {
  //   if (history.location.query.id) {
  //     return querySubscriberDetail(history.location.query);
  //   }
  // });

  const onFinish = async (values: Record<string, any>) => {
    values.avatar = values.upload[0].response.data.url;
    delete values.upload;
    if (history.location.query.id) {
      values.id = history.location.query.id;
      try {
        const response = await updateSubscriber(values);
        if (response.code == 200) {
          message.success('修改成功');
        } else {
          message.error('修改失败!');
        }
      } catch (error) {
        console.log(error);
      }
    } else {
      try {
        const response = await fakeSubmitForm(values);
        if (response.code == 200) {
          message.success('提交成功');
        } else {
          message.error('提交失败!' + response.message);
        }
      } catch (error) {
        console.log(error);
      }
    }
  };

  const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 14 },
  };

  return (
    <PageContainer content="">
      <Card bordered={false}>
        <ProForm
          hideRequiredMark
          style={{ margin: 'auto', marginTop: 8 }}
          name="basic"
          layout="horizontal"
          // initialValues={data}
          onFinish={onFinish}
          {...formItemLayout}
          request={async () => {
            if (history.location.query.id) {
              return querySubscriberDetail(history.location.query).then(({ data }) => {
                data.upload = [
                  {
                    uid: '1',
                    name: 'avatar',
                    status: 'done',
                    url: 'http://oss.yizuoyiyou.com.cn' + data.avatar,
                  },
                ];
                return data;
              });
            } else {
              return {};
            }
          }}
          submitter={{
            render: (props, doms) => {
              return (
                <Row>
                  <Col span={14} offset={4}>
                    <Space>{doms}</Space>
                  </Col>
                </Row>
              );
            },
          }}
        >
          <ProFormText
            width="md"
            label="用户手机号"
            name="phone"
            rules={[
              {
                required: true,
                message: '请输入用户手机号',
              },
            ]}
            placeholder="请输入用户手机号"
          />
          <ProFormSelect
            width="md"
            name="source"
            label="用户来源"
            request={async () => {
              const params = { dictCode: 'userSource' };
              return queryDictList(params).then(({ data }) => {
                return data.map((item) => {
                  return {
                    label: item.itemName,
                    value: item.id,
                  };
                });
              });
            }}
          />
          <Divider />
          <ProFormText
            width="md"
            name="nickName"
            label="用户昵称"
            rules={[
              {
                required: true,
                message: '请输入用户昵称',
              },
            ]}
            placeholder="请输入用户昵称"
          />
          <ProFormUploadButton
            name="upload"
            label="用户头像"
            max={1}
            fieldProps={{
              name: 'file',
              listType: 'picture-card',
            }}
            action="/api/file/upload"
          />
        </ProForm>
      </Card>
    </PageContainer>
  );
};

export default BasicForm;
